<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>01列表渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
    <!-- v-for语法:v-for="(item,index) in xxx " :key = "yyy" -->
<body>
    <div id="demo">
        <h1>人员列表</h1><br>
        <ul>
            <li v-for="(p,index) in shuju" :key ="p.id" >
                {{p.name}} - {{p.age}} - {{p.id}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                shuju:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ]
               
                
            },
            methods: {},
            computed: {},
            watch: {}
        })
    </script>
</body>

</html>